
<template>
  <div class="personalCenter">
    <el-container>
      <el-header>用户中心</el-header>
      <el-container>
        <el-aside width="400px">
          <el-col :span="12">
            <div class="sub-title"></div>
            <div class="demo-basic--circle">
              <div class="img">
                <el-avatar :size="100" :src="circleUrl" align="center"></el-avatar>
              </div>
              <div class="block">
                <span>ADMIN</span>
              </div>
            </div>
          </el-col>
          <el-input v-model="user.username" type="text" placeholder="用户ID" maxlength="20" show-word-limit></el-input>
          <el-input v-model="user.nickname" type="text" placeholder="用户昵称" show-word-limit></el-input>
          <el-input v-model="user.password" placeholder="请输入密码" show-password></el-input>
          <el-input v-model="user.email" placeholder="邮箱"></el-input>
          <el-input v-model="user.phone" type="text" placeholder="手机号码" maxlength="20" show-word-limit></el-input>
          <el-input v-model="user.address" type="text" placeholder="地址" maxlength="40" show-word-limit></el-input>
          <el-button-group style="float: right; padding: 3px 0" type="text">
            <el-button type="primary" size="medium" round @click="save">保存</el-button>
          </el-button-group>
        </el-aside>
        <el-container>
          <el-main>
            <el-card>
              <div slot="header" class="clearfix">
                <h1>我的收货人信息</h1>
                <ul v-for="(item, index) in receive" class="cart_list_td clearfix" :key="index">
                  <li>收货人姓名：{{ item.name }}&nbsp;</li>
                  <li>收货人地址：{{ item.address }}&nbsp;&nbsp;</li>
                  <li>收货人电话：{{ item.phone }}&nbsp;&nbsp;&nbsp;&nbsp;</li>
                  <li>
                    <el-button type="info" plain @click="deleteRec(item.id)">删除</el-button>
                  </li>
                </ul>
              </div>
            </el-card>
            <el-card>
              <el-input v-model="add.name" placeholder="收货人姓名"></el-input>
              <el-input v-model="add.address" placeholder="收货人地址"></el-input>
              <el-input v-model="add.phone" placeholder="收货人电话"></el-input>
              <el-button type="primary" style="float: right" @click="addRec">添加收货人</el-button>
            </el-card>

          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>

</template>
<script>
import { saveOrUpdateUser } from '../api/User'
import { getReceiveApi } from '../api/GetReceive'
import { insertReceiveApi } from '../api/Receive'
import { deleteReceiveApi } from '../api/Receive'
export default {
  name: 'PersonalCenter',
  data() {
    return {
      text: '',
      user: JSON.parse(window.sessionStorage.getItem("user")),
      circleUrl:
        'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
      sizeList: ['large'],
      receive: [],
      add: {
        id: "",
        name: "",
        address: "",
        phone: "",
        userid: JSON.parse(window.sessionStorage.getItem("user")).id,
      }
    }
  },
  methods: {
    save() {
      saveOrUpdateUser(this.user).then(resp => {
        if (resp.msg == "success") {
          alert("保存成功");
        }
      })
    },
    addRec() {
      insertReceiveApi(this.add).then(resp => {
        getReceiveApi({ "id": JSON.parse(window.sessionStorage.getItem("user")).id }).then(resp => {
          this.receive = resp;
        })
      })

    },
    deleteRec(id) {
      deleteReceiveApi({ id }).then(resp => {
        getReceiveApi({ "id": JSON.parse(window.sessionStorage.getItem("user")).id }).then(resp => {
          this.receive = resp;
        })
      })
    }

  },
  created() {
    if (JSON.parse(window.sessionStorage.getItem("user")) == null) {
      this.$router.push("/login");
      return;
    };
    getReceiveApi({ "id": JSON.parse(window.sessionStorage.getItem("user")).id }).then(resp => {
      this.receive = resp;
    })
  }
}
</script>
<style>
.el-header {
  line-height: 60px;
  text-align: center;
  background-color: #b3c0d1;
}

.el-aside {
  line-height: 44px;
  text-align: center;
  background-color: #d3dce6;
}

.el-main {
  line-height: 36px;
  text-align: center;
  background-color: #e9eef3;
}

.demo-basic--circle {
  align: 'center';
  margin-top: 30px;
  margin-left: 150px;
}

.block {
  margin-left: 25px;
  font-weight: bold;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 1368px;
  border-radius: 30px;
}

.wrap {
  line-height: 200px;
  /*垂直居中关键*/
  text-align: center;
  height: 200px;
  font-size: 36px;
  background-color: #ccc;
}
</style>














